import { View, Text, Input } from '@tarojs/components'
import { useState } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'

interface LoginPopProps {
  visible: boolean
  onClose: () => void
  onLogin: () => void
}

export default function LoginPop({ visible, onClose, onLogin }: LoginPopProps) {
  const [checked, setChecked] = useState(false)
  const [showProtocolTip, setShowProtocolTip] = useState(false)
  const [mode, setMode] = useState<'default' | 'password' | 'forgot' | 'forgot-verify' | 'reset-pwd' | 'reset-success'>('default')
  const [rememberPwd, setRememberPwd] = useState(false)
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [phone, setPhone] = useState('180****7175') // 示例手机号
  const [verifyCode, setVerifyCode] = useState('')
  const [resetPwd1, setResetPwd1] = useState('')
  const [resetPwd2, setResetPwd2] = useState('')
  const [showPwd1, setShowPwd1] = useState(false)
  const [showPwd2, setShowPwd2] = useState(false)
  if (!visible) return null

  const handleLogin = () => {
    if (!checked) {
      setShowProtocolTip(true)
      setTimeout(() => setShowProtocolTip(false), 2000)
      return
    }
    onLogin()
  }

  const handleCheck = () => {
    setChecked(v => !v)
  }

  const handleRemember = () => {
    setRememberPwd(v => !v)
  }

  return (
    <View className='login-modal-pop-overlay' onClick={onClose}>
      <View className='login-modal-pop' onClick={e => e.stopPropagation()}>
        <View className='login-modal-pop-header'>
          {/* 顶部插画/Logo占位 */}
          <View className='login-modal-pop-img-placeholder'></View>
          <Text className='login-modal-pop-title'>让你永无后顾之忧</Text>
        </View>
        <View className='login-modal-pop-content'>
          {mode === 'default' && <>
            <View
              className={`login-modal-pop-btn${checked ? '' : ' disabled'}`}
              onClick={handleLogin}
            >
              手机号快捷登录/注册
            </View>
            <View style={{ height: '20px' }} />
            <View className='login-modal-pop-password' onClick={() => setMode('default')}>短信登录/注册</View>
            <View className='login-modal-pop-password' onClick={() => setMode('password')}>密码登录</View>
          </>}
          {mode === 'password' && <>
            <View className='login-modal-pop-tabs'>
              <Text className='login-modal-pop-tab' onClick={() => setMode('default')}>短信登录/注册</Text>
              <Text className='login-modal-pop-tab active'>密码登录</Text>
            </View>
            <Input
              className='login-modal-pop-input'
              placeholder='请输入手机号/账号'
              value={username}
              onInput={e => setUsername(e.detail.value)}
            />
            <Input
              className='login-modal-pop-input'
              placeholder='请输入密码'
              password
              value={password}
              onInput={e => setPassword(e.detail.value)}
            />
            <View className='login-modal-pop-forgot' onClick={() => setMode('forgot')}>忘记密码？</View>
            <View
              className={`login-modal-pop-btn${checked ? '' : ' disabled'}`}
              onClick={handleLogin}
            >
              登录
            </View>
            <View className='login-modal-pop-row'>
              <View className='login-modal-pop-checkbox-row' onClick={handleRemember}>
                <View className={`login-modal-pop-checkbox${rememberPwd ? ' checked' : ''}`}>
                  {rememberPwd && <View className='login-modal-pop-checkbox-inner' />}
                </View>
                <Text className='login-modal-pop-remember'>记住密码</Text>
              </View>
            </View>
          </>}
          {mode === 'forgot' && <>
            <View className='login-modal-pop-forgot-title'>找回密码</View>
            <View className='login-modal-pop-forgot-desc'>
              为了保障你的账户安全<br />我们需要对你进行身份验证
            </View>
            <Input
              className='login-modal-pop-input'
              placeholder='请输入你的登录手机号'
              value={username}
              onInput={e => setUsername(e.detail.value)}
            />
            <View
              className='login-modal-pop-btn'
              onClick={() => setMode('forgot-verify')}
            >
              确认
            </View>
            <Text className='login-modal-pop-tip' style={{width: '100%', textAlign: 'center', marginTop: '18px'}}>双击进入随便体验</Text>
          </>}
          {mode === 'forgot-verify' && <>
            <View className='login-modal-pop-forgot-title'>找回密码</View>
            <View className='login-modal-pop-forgot-desc'>
              我们需要向你的手机号 <Text className='login-modal-pop-forgot-phone'>{phone}</Text><br />发送验证码完成身份验证
            </View>
            <View className='login-modal-pop-verify-row'>
              <Input
                className='login-modal-pop-input login-modal-pop-verify-input'
                placeholder='请输入验证码'
                value={verifyCode}
                onInput={e => setVerifyCode(e.detail.value)}
              />
              <View className='login-modal-pop-verify-btn'>获取验证码</View>
            </View>
            <View
              className='login-modal-pop-btn'
              onClick={() => setMode('reset-pwd')}
            >
              确认
            </View>
          </>}
          {mode === 'reset-pwd' && <>
            <View className='login-modal-pop-forgot-title'>找回密码</View>
            <View className='login-modal-pop-forgot-desc'>你正在重置账号密码，请谨慎操作</View>
            <View className='login-modal-pop-pwd-row'>
              <Input
                className='login-modal-pop-input login-modal-pop-reset-input'
                placeholder='请输入密码'
                password={!showPwd1}
                value={resetPwd1}
                onInput={e => setResetPwd1(e.detail.value)}
              />
              <View className='login-modal-pop-eye' onClick={() => setShowPwd1(v => !v)}>
                👁
              </View>
            </View>
            <View className='login-modal-pop-pwd-row'>
              <Input
                className='login-modal-pop-input login-modal-pop-reset-input'
                placeholder='请再次输入密码'
                password={!showPwd2}
                value={resetPwd2}
                onInput={e => setResetPwd2(e.detail.value)}
              />
              <View className='login-modal-pop-eye' onClick={() => setShowPwd2(v => !v)}>
                👁
              </View>
            </View>
            <View
              className='login-modal-pop-btn'
              onClick={() => {
                setResetPwd1('');
                setResetPwd2('');
                setShowPwd1(false);
                setShowPwd2(false);
                setMode('reset-success');
              }}
            >
              确认
            </View>
          </>}
          {mode === 'reset-success' && <>
            <View className='login-modal-pop-forgot-title'>找回密码</View>
            <View className='login-modal-pop-success-icon'>✔️</View>
            <View className='login-modal-pop-success-text'>密码重置成功</View>
            <View
              className='login-modal-pop-btn'
              onClick={() => setMode('password')}
            >
              前往商城首页
            </View>
            <Text className='login-modal-pop-tip' style={{width: '100%', textAlign: 'center', marginTop: '18px'}}>双击进入随便体验</Text>
          </>}
        </View>
        <View className='login-modal-pop-protocol'>
          {showProtocolTip && (
            <View className='protocol-tip-bubble'>请先阅读并同意用户协议</View>
          )}
          <View className='login-modal-pop-checkbox-row'>
            <View
              className={`login-modal-pop-checkbox${checked ? ' checked' : ''}`}
              onClick={handleCheck}
            >
              {checked && <View className='login-modal-pop-checkbox-inner' />}
            </View>
            <Text className={`login-modal-pop-protocol-text${showProtocolTip ? ' highlight' : ''}`}>
              我已阅读并接受《用户注册协议》和《隐私协议》
            </Text>
          </View>
        </View>
      </View>
    </View>
  )
} 